<template>
  <div id="db-list">
    <!-- TODO 选中数据库后显示，筛选'base_db'数据库，选中当前连接后显示：筛选数据库 -->
    <el-input class="filter-db-input" placeholder="筛选数据库"> </el-input>

    <!-- 当前连接地址 -->
    <div class="current-connect">
      <icon name="icon-fuwuqiguanli" />
      <a>root@sh-cdb-8qvcy5ii.sql.tencentcdb.com</a>
    </div>

    <!-- <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      highlight-current
      ref="tree"
      :expand-on-click-node="false"
      :render-content="renderContent"
    >
    </el-tree> -->

    <!-- 数据库列表 -->
    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      highlight-current
      ref="tree"
      :expand-on-click-node="false"
    >
      <span class="custom-tree-node" slot-scope="{ node }">
        <span class="tree-icon">
          <!-- 数据库 -->
          <icon
            v-if="node.level === 1"
            name="icon-liebiaotubiao-SOLzhuanhuan-"
          />
          <!-- 第二级 文件夹：表、视图、存储过程、函数、触发器、事件 -->
          <icon
            v-else-if="node.level === 2"
            name="icon-caozuojiemiantubiao---_wenjian"
          />

          <template v-else-if="node.level === 3 ">
              <!-- 如果是表格 -->
             <icon
            v-if="node.data.type == 'table'"
            name="icon-zu"
            />
          </template>
          
        </span>
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent(h, { node, data, store }) {
      console.log('node', node.level)
    }
  },

  data() {
    return {
      filterText: '',
      data: [
        {
          id: '1',
          label: 'be',
          type:'database',
          children: [
            {
              id: '1.1',
              label: '表',
              type:'table-list',
              children: [
                {
                  id: '1.1.1',
                  label: 'be_account',
                  type:'table'
                },
                {
                  id: '1.1.2',
                  label: 'be_projects',
                  type:'table'
                }
              ]
            },
            {
              id: '1.2',
              label: '视图',
              type:'view-list'
            },
            {
              id: '1.3',
              label: '存储过程',
              type:'stored-procedure-list'
            },
            {
              id: '1.4',
              label: '事件调度器',
              type:'event-scheduler-list'
            },
            {
              id: '1.5',
              label: '函数',
              type:'function-list'
            },
            {
              id: '1.6',
              label: '触发器',
              type:'trigger-list'
            }
          ]
        },
        {
          id: '1',
          label: 'finedb',
          children: [
            {
              id: '2.1',
              label: '表',
              type:'table-list'
            },
            {
              id: '2.2',
              label: '视图'
            },
            {
              id: '2.3',
              label: '存储过程'
            },
            {
              id: '2.4',
              label: '事件'
            },
            {
              id: '2.5',
              label: '函数'
            },
            {
              id: '2.6',
              label: '触发器'
            }
          ]
        },
        {
          id: '3',
          label: 'zf_platform',
          children: [
            {
              id: '3.1',
              label: '表',
              type:'table-list'
            },
            {
              id: '3.2',
              label: '视图'
            },
            {
              id: '3.3',
              label: '存储过程'
            },
            {
              id: '3.4',
              label: '事件'
            },
            {
              id: '3.5',
              label: '函数'
            },
            {
              id: '3.6',
              label: '触发器'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>


<style lang="scss" scoped>
#db-list {
  .filter-db-input {
  }

  .tree-icon {
    margin-right: 5px;
  }

  .current-connect {
    margin: 3px 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    a {
      font-size: 13px;
    }
  }

  .custom-tree-node {
    display: flex;
  }
}
</style>